<template>
	<div class="app-container">
		<el-card shadow="never" class="menu-card">
			<template #header>
				<el-button style="width: 100%;" @click="addRoles({})">添加角色</el-button>
			</template>
			<el-table :data="roleTableData" ref="roleTableRef" :show-header="false" @row-click="roleClick" :highlight-current-row="true">
				<el-table-column label="角色名称" prop="roleName"></el-table-column>
				<el-table-column label="操作" width="100px">
					<template #default="{row}">
						<el-button v-if="row.roleId != 1" type="text" @click.stop="addRoles(row)">编辑</el-button>
						<el-button v-if="row.roleId != 1" type="text" @click.stop="deleteRoles(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-card shadow="never" class="body-card">
			<template #header>
				<div class="right_header">
					<el-select v-model="selectUserId" placeholder="请选择需要关联的用户" filterable style="width: 400px">
						<el-option v-for="item in userList" :key="item.userId" :label="'部门：'+item.deptName + ' -- ' +'姓名：'+ item.nickName" :value="item.userId"></el-option>
					</el-select>
					<el-button type="primary" :disabled="selectRoleId == 1" style="margin-left: 10px;" @click="addRolesUser">关联用户</el-button>
				</div>
			</template>
			<el-table :data="userTableData" >
				<el-table-column label="ID" align="center" prop="userId"></el-table-column>
				<el-table-column label="账号" align="center" prop="userName"></el-table-column>
				<el-table-column label="姓名" align="center" prop="nickName"></el-table-column>
				<el-table-column label="部门" align="center" prop="deptName"></el-table-column>
				<el-table-column label="角色" align="center" prop="roleName"></el-table-column>
				<el-table-column label="操作" align="center" width="100px">
					<template #default="{row}">
						<el-button v-if="selectRoleId != 1" type="text" @click="cancelRolesUser(row)">取消关联</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-if="queryParams.total > 0" class="pagination-footer" :total="queryParams.total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="query()"/>
		</el-card>

		<roleDialog ref="roleDialogRef" @rest="query"/>
	</div>
</template>
<script>
import { nextTick, reactive, toRefs } from "vue"
import roleDialog from "./components/roleDialog.vue"
import { getRoleList, deleteRole, getRoleUser, addRoleUsers, deleteRoleUser } from "@/api/system/role"
import { getUser } from "@/api/system/user"
import { ElMessage, ElMessageBox } from "element-plus"

export default {
	name: "temp",
	components: { roleDialog },
	setup() {
		const data = reactive({
			roleTableData: [],
			userTableData: [],
			userList: [],
			selectRoleId: '',
			selectUserId: '',
			queryParams: { pageNo: 1, pageSize: 10, total: 0 },
			roleDialogRef: null,
			roleTableRef: null
		})

		const addRoles = (row) => {
			nextTick(() => {
				data.roleDialogRef.openDialog(row)
			})
		}

		const query = () => {
			getRoleList().then(res=>{
				if(res.code == 200){
					data.roleTableData = res.data
					getUserList(res.data[0].roleId)
					nextTick(()=>{
						data.roleTableRef.setCurrentRow(res.data[0])
					})
				}
			})
		}

		const deleteRoles = (row) => {
		    ElMessageBox.confirm(
					'是否确认删除此角色信息?',
					'删除',
				{
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				let obj = {
					roleId: row.roleId,
				}
				deleteRole(obj).then(res=>{
					if(res.code == 200){
						ElMessage({ message: "删除成功", type: "success" })
						query()
					}else{
						ElMessage({ message: res.msg, type: "error" })
					}
				})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
		}

		const getUserList = (e) => {
			data.selectRoleId = e
			getRoleUser({roleId: e, ...data.queryParams}).then(res=>{
				if(res.code == 200){
					data.userTableData = res.data.rows
					data.queryParams.total = res.data.totalRows
				}else{
					ElMessage({ message: res.msg, type: "error" })
				}
			})
		}

		const roleClick = (e) => { 
			getUserList(e.roleId) 
		}

		const cancelRolesUser = (row) => {
		    ElMessageBox.confirm(
					'是否确认取消此关联角色?',
					'删除',
				{
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				console.log(row, '取消数据');
				let obj = {
					roleId: data.selectRoleId,
					userId: row.userId,
				}
				deleteRoleUser(obj).then(res=>{
					if(res.code == 200){
						ElMessage({ message: "取消成功", type: "success" })
						getUserList(data.selectRoleId)
						getList()
					}else{
						ElMessage({ message: res.msg, type: "error" })
					}
				})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
		}

		const addRolesUser = () => {
			if(!data.selectUserId){
				ElMessage({ message: "请选择需要关联的用户", type: "warning" })
	            return false
			}else{
				console.log(data.selectUserId, data.selectRoleId, 'addRolesUser');
				addRoleUsers({
					userId: data.selectUserId,
                    roleId: data.selectRoleId,
				}).then(res=>{
					if(res.code == 200){
						getUserList(data.selectRoleId) 
						data.selectUserId = ''
						getList()
					}
				})
			}
		}

		const getList = () => {
			getUser({
				pageNo: 1,
				pageSize: 999,
			}).then(res=>{
				if(res.code == 200){
					data.userList = res.data.rows
					data.userList = data.userList.filter(item=>!item.roleId)
				}else{
					ElMessage({ message: res.msg, type: "error" })
				}
			})
		}

		onMounted(() => {
			query()
			getList()
		})

		return {
			...toRefs(data),
			addRoles,
			deleteRoles,
			roleClick,
			cancelRolesUser,
			addRolesUser
		}
	}
};
</script>
<style lang="scss" scoped>
.app-container{
	display: flex;
	.right_header{
		display: flex;
		justify-content: flex-end;
	}
}
.menu-card{
	width: 400px;
}
</style>